<template>
	<div class="credit">
		<div class="content">
			<div class="detail">
				<div><b>1</b><span>张</span></div>
			</div>
			<div class="cof-n">
				<p>编号：No.{{ sno }}</p>
				<p>{{ start }} - {{ end }}</p>
			</div>
		</div>
		<div class="reason">
			<template v-if="state === 1">审核中...</template>
			<template v-else-if="state === 2">
				<van-button color="#7232dd" plain size="mini" @click="generatorCode">二维码</van-button>
			</template>
			<template v-else-if="state === 3">已使用或过期</template>
			<template v-else-if="state === 0">未审核通过</template>
		</div>
	</div>
	<!-- 二维码 -->

   <van-popup v-model:show="show" :style="{ padding: '24px' }">
		<canvas ref="qrCanvas"></canvas>
   </van-popup>
	
</template>

<script>
	
import QRCode from 'qrcode';
	
export default {
	props: {
		id: {
			type: [Number, String], 
			required: true,
		},
		state: {
			type: Number, 
			required: true,
		},
		start: {
			type: String,
			required: false,
		},
		end: {
			type: String,
			required: false,
		},
	},
	data() {
		return {
			show: false,
		}
	},
	methods: {
		generatorCode() {
			this.show = true ;
			this.$nextTick(()=> {
				// 获取 页面中的 canvas 标签
				let canvas = this.$refs.qrCanvas ;
				// 获取当前网站的 协议、 域名、端口号
				let url = location.protocol + "//" + location.hostname ;
				if (location.protocol ==="http:" && location.port == 80 || location.protocol ==="https:" && location.port == 443) {
					url += "/preview" ;
				}else{
					url += ":" + location.port + "/preview" ;
				}
				// 设置二维码配置信息
				const opts = { scale: 3, width: 240, margin: 1 }; // 设置scale为3，宽度为200px，边距为1

				// 获取 url 信息
				QRCode.toCanvas(canvas, url, opts,  error => {
					if (error) console.error(error);
				});
				// 调用 接口 、获取 url 的签名信息
				/* this.$api.getQrCodeParams(this.id).then(ret=> {
					if (ret.status) {
						url += "?sign=" + ret.data.sign + "&time=" + ret.data.time + "&cid=" + ret.data.cid ;
						QRCode.toCanvas(canvas, url, opts error => {
							if (error) console.error(error);
						});
					}
				}) */
			})
			
		}
	},
	computed: {
		sno() {
			// 编号 
			return this.id.toString().padStart(9, "0");
		}
	}
	
}	
</script>

<style scoped>

.credit {
	display: flex;
	flex-direction: column;
	margin: 0px 15px 20px;
	padding: 20px 20px 0 20px;
	width: 100%;
	background-color: #fff;
	border-radius: 8px;
	font-size: 18px;
	font-family: Open Sans, -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Segoe UI, Arial, Roboto, PingFang SC, miui, Hiragino Sans GB, Microsoft Yahei, sans-serif;;
	
}

.credit .content {
	position: relative;
	display: flex;
	height: 100px;
	font-weight: 800; 
}

.credit .cof-n {
	display: flex;
	flex-direction: column;
	color: #323233;
	padding: 5px;
	font-size: 14px;
}

.credit .cof-n > p:last-child {
	font-weight: normal;
}

.credit .detail {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #1989fa;
	flex-basis: 30%;
}

.credit .detail b {
	font-size: 52px;
	padding: 0 8px;
}

.credit .content::after {
	content: '';
	position: absolute;
	width: calc(100% + 40px);
	border: 1px dashed #eee;
	bottom: 0;
	left: -20px;
}

.credit .reason {
	height: 50px;
	line-height: 50px;
	font-size: 14px;
}

</style>